<template>
  <div class="app-container home">
    <el-divider content-position="left">统计</el-divider>
    <el-row style="margin: 100px;" type="flex">
      <el-col :span="10">
        <el-card class="box-card">
          <div class="clearfix card-header">
            <el-date-picker v-model="userForm.date" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期" 
              value-format="yyyy-MM-dd"
              style="width: 280px;margin-right: 10px;"></el-date-picker>
            <el-button icon="el-icon-search" type="primary" circle @click="queryUser"></el-button>
            <el-button icon="el-icon-close" type="danger" circle @click="resetUser"></el-button>
          </div>
          <div class="number-content">
            <div>用户数量</div>
            <div class="number">{{ result.userCount }}</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="10" style="margin-left: 50px;">
        <el-card class="box-card">
          <div class="clearfix card-header">
            <el-date-picker v-model="teacherForm.date" type="daterange" range-separator="至" start-placeholder="开始日期"
            value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width: 280px;margin-right: 10px;"></el-date-picker>
            <el-button icon="el-icon-search" type="primary" circle @click="queryTeacher"></el-button>
            <el-button icon="el-icon-close" type="danger" circle @click="resetTeacher"></el-button>
          </div>
          <div class="number-content">
            <div>教师数量</div>
            <div class="number">{{result.teacherCount}}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row style="margin: 100px;">
      <el-col :span="10">
        <el-card class="box-card">
          <div class="clearfix card-header">
            <el-select v-model="orderForm.status" placeholder="订单状态" clearable style="width: 150px;margin-right: 10px;">
              <el-option v-for="dict in dict.type.order_status" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
            <el-date-picker v-model="orderForm.date" type="daterange" range-separator="至" start-placeholder="开始日期"
            value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width: 280px;margin-right: 10px;"></el-date-picker>
            <el-button icon="el-icon-search" type="primary" circle @click="queryOrder"></el-button>
            <el-button icon="el-icon-close" type="danger" circle @click="resetOrder"></el-button>
          </div>
          <div class="number-content">
            <div>订单数量</div>
            <div class="number">{{result.orderCount}}</div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="10" style="margin-left: 50px;">
        <el-card class="box-card">
          <div class="clearfix card-header">
            <el-select v-model="cancelLessonForm.teacherId" placeholder="教师" clearable style="width: 150px;margin-right: 10px;">
              <el-option v-for="teacher in teacherList" :key="teacher.value" :label="teacher.label"
                :value="teacher.value" />
            </el-select>
            <el-date-picker v-model="cancelLessonForm.date" type="daterange" range-separator="至" start-placeholder="开始日期"
            value-format="yyyy-MM-dd" end-placeholder="结束日期" style="width: 280px;margin-right: 10px;"></el-date-picker>
              <el-button icon="el-icon-search" type="primary" circle @click="queryCancelLesson"></el-button>
            <el-button icon="el-icon-close" type="danger" circle @click="resetCanceLesson"></el-button>
          </div>
          <div class="number-content">
            <div>消课数量</div>
            <div class="number">{{result.cancelCount}}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
import { queryUser, queryTeacher, queryOrder, queryCancelLesson } from '@/api/spoken/statistics'
import { listTeacher } from '@/api/spoken/teacher'
export default {
  dicts: ['order_status'],
  name: "Index",
  data() {
    return {
      userForm: {
        date: []
      },
      teacherForm: {
        date: []
      },
      orderForm: {
        status: '',
        date: []
      },
      cancelLessonForm: {
        teacherId: null,
        date: []
      },
      result: {
        userCount: 0,
        teacherCount: 0,
        orderCount: 0,
        cancelCount: 0
      },
      teacherList: []
    };
  },
  created() {
    this.queryUser()
    this.queryTeacher()
    this.queryOrder()
    this.queryCancelLesson()
    this.listTeacher()
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    listTeacher(){
      listTeacher({pageSize: 9999}).then(res => {
        this.teacherList = res.rows.map(item => {
          return {
            label: item.sysUser.nickName,
            value: item.sysUser.userId
          }
        })
      })
    },
    queryUser(){
      queryUser(this.userForm).then(res => {
        this.result.userCount = res.data
      })
    },
    queryTeacher(){
      queryTeacher(this.teacherForm).then(res => {
        this.result.teacherCount = res.data
      })
    },
    queryOrder(){
      queryOrder(this.orderForm).then(res => {
        this.result.orderCount = res.data
      })
    },
    queryCancelLesson(){
      queryCancelLesson(this.cancelLessonForm).then(res => {
        this.result.cancelCount = res.data
      })
    },
    resetUser(){
      this.userForm = {date: []}
      this.queryUser()
    },
    resetTeacher(){
      this.teacherForm = {date: []}
      this.queryTeacher()
    },
    resetOrder(){
      this.orderForm = {
        status: '',
        date: []
      }
      this.queryOrder()
    },
    resetCanceLesson(){
      this.cancelLessonForm = {
        teacherId: null,
        date: []
      }
      this.queryCancelLesson()
    }
  }
};
</script>

<style scoped lang="scss">
.home {

  .card-header {
    display: flex;
    justify-content: center;
  }

  .number-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px;
    padding-bottom: 20px;
    font-size: 20px;

    .number {
      margin-top: 20px;
      font-size: 28px;
    }
  }
}
</style>

